/* chatBI.tsx */
.chatBI {
    width: 100%;
    position: relative;
    .container-think {
        margin-top: 10px;
        border-radius: 20px;
        background-color: #5768a114;
    }
    .container-status {
        white-space: wrap;
        margin-top: 10px;
        border-radius: 20px;
        background-color: #5768a114;
    }
    .ant-segmented-item-selected {
        background-color: #1677ff!important;
        color: #fff!important;
        
    }
    .ant-segmented {
        background-color: #fff;
    }
    .ant-segmented-group {
        gap: 10px;
        background-color: #fff;
        border: none;
    }
    .ant-typography {
        font-size: 16px;
    }
    .left-panel, .right-panel  {
        border-radius: 15px;
        background-color: #FFF;
    }
    .source-box {
        span {
            color: #1677ff;
        }
    }
    .plan {
        display: flex; /* 启用 Flex 布局 */
        align-items: center; /* 垂直居中对齐 */
        background: #f5f5f5;
        width: 130px;
        height: 32px;
        border-radius: 16px;
        margin-bottom: 20px;
        // border: 1px solid #d9d9d9;
        img {
            width: 12px; /* 控制图标大小 */
            height: 12px;
            margin-left: 10px;
        }
        span {
            /* 文字样式（如字体、颜色） */
            color: #262626;
            margin-left: 20px;
        }
    }
    .bianzu {
        display: flex; /* 启用 Flex 布局 */
        align-items: center; /* 垂直居中对齐 */
        gap: 10px; /* 图标与文字间距（可选） */
        img {
            width: 20px; /* 控制图标大小 */
            height: 20px;
            margin-left: 10px;
        }
        span {
            /* 文字样式（如字体、颜色） */
            color: #333333;
        }
    }
    .ant-bubble-header {
        display: none;
    }
    h3 {
        font-size: 18px;
    }
    h4 {
        font-size: 16px;
    }
    .ant-prompts {
        // color: ${token.colorText};
        .ant-prompts-list {
            gap: 25px !important;
        }
    }
    .menu {
        background: #ffffff;
        width: 284px;
        height: calc(100vh - 64px);
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .canvasDraw {
        background: #ffffff;
        width: 560px;
        height: 300px;
        position: relative;
        margin-top: 30px;
    }
    .conversations {
        padding: 0 12px;
        flex: 1;
        overflow-y: scroll;
    }
    .chat {
        height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 5px;
        position: relative;
        padding: 10px;
        // .ant-space-item {
        .ant-prompts {
            padding: 10px;
            // background: url(../../assets/images/banner.png) no-repeat center;
            background-size: 100% 100%;

            .ant-bubble-content {
                background-color: rgba(255, 255, 255, 0.7);
            }
            .ant-prompts-item {
                background: none;
                padding: 0;
                border: none;
                .ant-prompts-nested {
                    background: none;
                    padding: 0;
                }
                .ant-prompts-desc {
                    color: #8c8c8c;
                }
            }
            .ant-prompts-title {
                line-height: 70px;
                color: #000;
            }
        }
        // }
    }
    .select {
        width: 15%;
        max-width: 200px;
        position: absolute;
        top: 24px;
        left: 20px;
        flex: 1;
    }
    .optionRender {
        height: 40px;
    }
    .placeholder {
        // padding-top: 10%;
        position: absolute;
        top: 30%;
        left: 35%;
        transform: translate(-50%, -50%);
        padding: 100px;
        // min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        // background: #f0f2f5;
        font-family: Arial, sans-serif;
        .container {
            max-width: 1200px;
            height: 400px;
            // padding: 40px 20px;
        }

        h1 {
            color: #000000;
            font-size: 40px;
            text-align: center;
            margin-bottom: 20px;
        }

        .intro {
            color: #8c8c8c;
            font-size: 18px;
            margin-bottom: 50px;
            text-align: center;
        }

        .cards-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            width: 100%;
        }

        .card-column {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .card {
            background: #ffffff;
            border-radius: 8px;
            // padding: 30px;
            // box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            position: relative;
            overflow: hidden;
            min-height: 100px;
            border: 1px #bfd4ff solid;
            cursor: pointer;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px #b3bac8;
        }

        .card::after {
            content: '';
            position: absolute;
            inset: 0;
            // background: linear-gradient(120deg, rgba(255, 255, 255, 0.15) 25%, transparent 50%, rgba(0, 0, 0, 0.1) 75%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .card:hover::after {
            opacity: 1;
        }

        .card-content {
            position: relative;
            z-index: 2;
            // color: white;
            // text-align: center;
            // display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
        }

        .card h3 {
            color: #000;
            // font-size: 1.8em;
            // margin-bottom: 15px;
            // background: linear-gradient(45deg, #818cf8, #c084fc);
            -webkit-background-clip: text;
            padding: 0 15px;
            // -webkit-text-fill-color: transparent;
        }

        .card p {
            color: #8c8c8c;
            font-size: 14px;
            // line-height: 1.6;
            // font-size: 0.95em;
            padding: 0 15px;
        }

        /* 左侧卡片特殊样式 */
        .card-column:first-child .card {
            // background: linear-gradient(145deg, #7c3aed, #4f46e5);
            min-height: 310px;
            background: url(../../assets/images/bizhi.webp) no-repeat center;
            background-size: 100% 100%;
            border: none;
        }

        /* 中间和右侧卡片样式 */
        .card-column:nth-child(2) .card,
        .card-column:last-child .card {
            flex: 1;
            // background: linear-gradient(145deg, #2563eb, #3b82f6);
        }

        @media (max-width: 768px) {
            .cards-container {
                grid-template-columns: 1fr;
            }
            .card-column:first-child .card {
                min-height: 100px;
            }
        }
    }
    .sender {
        // box-shadow: ${token.boxShadow};
    }
    .logo {
        display: flex;
        height: 24px;
        align-items: center;
        justify-content: start;
        padding: 0 24px;
        box-sizing: border-box;

        img {
            width: 24px;
            height: 24px;
            display: inline-block;
        }

        span {
            display: inline-block;
            margin: 0 8px;
            font-weight: bold;
            // color: ${token.colorText};
            font-size: 16px;
        }
    }
    .ant-select-selector:hover {
        background-color: #1677ff0f;
    }
    .ant-bubble-start {
        // margin-left: 15%;
        // margin-top: 24px;
        .ant-bubble-content-filled {
            background-color: #ffffff;
            width: 100%;
        }
    }
    .ant-bubble-end {
        // width: 30%;
        // margin-left: 55%;
        flex-direction: column;
        .ant-bubble-content-filled {
            background-color: #6094ff;
            p {
                color: #ffffff;
            }
        }
    }
    .ant-space-vertical {
        margin: 0 15%;
        width: 818px;
    }
    .bottom {
        width: 100%; /* 修改为100%宽度 */
        position: relative; /* 修改为相对定位 */
        bottom: 0px;
        p {
            font-size: 12px;
            color: #a3a3a3;
            text-align: center;
        }
    }
    .ant-sender {
        width: 100%;
        // margin: 0 15% 24px 15%;
        background: rgba(255, 255, 255, 0.85);
        .ant-sender-prefix {
            // width: 10px;
            // height: 10px;
            position: absolute;
            bottom: 10px;
            right: 50px;
            z-index: 1000;
        }
    }

    .bgImage {
        height: 100%;
        // background: url(../../assets/images/bg1.png) no-repeat center;
        background-size: 100% 100%;
    }

    .ant-sender-content {
        background: #ffffff;
        border-radius: 13px;
        flex-direction: column;
    }
    /* 当有消息时修改布局方向 */
    .has-messages .ant-sender-content {
        flex-direction: unset !important;
    }

    /* 实时思考块样式 */
    .think-realtime {
        background: #f5f5f5 !important;
        border-left: 4px solid #1890ff !important;
        transition: all 0.3s ease;
        animation: think-pulse 1.5s infinite alternate;
    }
    .think-title {
        width: 100%;
        white-space: wrap;
        // width: fit-content;
        color: rgba(38, 38, 38, 0.55);
        font-size: 14px;
        // white-space: nowrap;
        margin-left: 10px;
    }
    .result-container {
        margin: 20px 0;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 4px;
        border: 1px solid #dee2e6;
    }

    .result-container table {
        width: 100%;
        border-collapse: collapse;
        margin: 15px 0;
    }

    .result-container th,
    .result-container td {
        padding: 8px;
        border: 1px solid #dee2e6;
    }

    .result-container th {
        background-color: #e9ecef;
    }
    /* 增强表格样式 */
    .real-table-container {
        max-height: 500px;
        overflow: hidden;
        overflow: scroll;
    }
    .real-time-container table {
        width: 100%;
        border-collapse: collapse;
        margin: 16px 0;
        background: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

    .real-time-container td,
    .real-time-container th {
        white-space: nowrap; /* 禁止文字换行 */
        padding: 12px;
        border: 1px solid #e8e8e8;
        text-align: center !important; /* 水平居中 */
    }

    .real-time-container tr:nth-child(even) {
        background: #fafafa;
    }

    /* SQL代码块容器 */
    .sql-block {
        position: relative;
        border-radius: 8px;
        padding: 1.5rem;
        margin: 1rem 0;
        // background: #ffffff;
        background: #2d2d2d;
        // border: 1px solid #404040;
        // box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    /* 悬停效果 */
    // .sql-block:hover {
    //     transform: translateY(-2px);
    //     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    // }

    /* 添加语言标签 */
    // .sql-block::after {
    //     content: 'SQL';
    //     position: absolute;
    //     top: -10px;
    //     right: 15px;
    //     background: #007bff;
    //     color: white;
    //     padding: 4px 8px;
    //     border-radius: 4px;
    //     font-size: 0.8em;
    //     font-weight: bold;
    // }

    /* 复制按钮 */
    .copy-btn {
        position: absolute;
        bottom: 10px;
        right: 15px;
        opacity: 0;
        transition: opacity 0.3s ease;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        padding: 4px 10px;
        border-radius: 4px;
        cursor: pointer;
    }

    .sql-block:hover .copy-btn {
        opacity: 1;
    }

    /* 高亮样式覆盖 */
    .hljs {
        // background: transparent !important;
        // padding: 20px !important;
    }

    // 在 index.less 中添加以下样式
    .table-optimized {
        // 表头样式优化
        .ant-table-thead > tr > th {
            background-color: #fafafa;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            border-bottom: 2px solid #e8e8e8;
            white-space: nowrap; // 防止表头换行

            // 添加排序图标间距
            .ant-table-column-sorter {
                margin-left: 8px;
            }
        }

        // 斑马纹表格
        .ant-table-tbody > tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        // 悬停效果
        .ant-table-tbody > tr:hover {
            background-color: #e6f7ff !important;
            transition: background-color 0.3s ease;
        }

        // 单元格样式
        .ant-table-cell {
            padding: 12px 16px !important;
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            // 带操作按钮的列
            &.action-cell {
                white-space: nowrap;
                button {
                    margin: 0 4px;
                    padding: 4px 8px;
                }
            }
        }

        // 固定操作列
        .fixed-action-column {
            position: sticky;
            right: 0;
            background: #fff;
            box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
            z-index: 1;
        }

        // 响应式处理
        @media (max-width: 768px) {
            .ant-table-cell {
                padding: 8px !important;
                font-size: 12px;
            }
        }
    }

    .right-content-container {
        width: calc(100% - 24px);
        height: calc(100vh - 60px) !important;
        display: inline-block;
    }
    .html-content-container {
        height: 100%;
        position: relative;
        background: #ffffff;
        overflow: hidden;
    }
    .html-container {
        margin: 16px 0;
        border-radius: var(--s-radius-S, 12px);
        padding: 2px 0 2px 8px;
        position: relative;
        width: 200px;
        border: 1px solid rgba(0, 0, 0, 0.55);
        box-shadow: 0 6px 10px 0 #2f35401a;
        transition: all 0.3s;
        cursor: pointer;
        .html-header {
            align-items: center;
            display: flex;
            padding: 6px 15px 8px 6px;
            img {
                font-size: 16px;
            }
            div {
                display: flex;
                flex-direction: column;
                margin-left: 8px;
                span:nth-child(1) {
                    font-size: 14px;
                    color: #000000d9;
                }
                span:nth-child(2) {
                    font-size: 12px;
                    color: #0000004d;
                }
            }
        }
        .html-bottom {
            align-items: center;
            display: flex;
            padding: 0px 15px 0px 6px;
            p {
                margin-left: 8px;
                font-size: 12px;
                color: #00000080;
            }
        }
    }
    /* 表格基础样式 */
    table {
        width: 100%;
        border-collapse: collapse;
        min-width: 600px;
        white-space: nowrap;
    }

    /* 统一单元格样式 */
    th,
    td {
        padding: 12px 16px;
        border: 1px solid #e0e0e0;
        text-align: center !important;
    }

    /* 表头特殊样式 */
    th {
        background: #f5f5f5;
        color: #000;
        font-weight: 600;
        position: sticky;
        left: 0;
    }

    /* 首行圆角处理 */
    tr:first-child th:first-child {
        // border-top-left-radius: 8px;
    }
    tr:first-child th:last-child {
        // border-top-right-radius: 8px;
    }

    /* 悬停效果 */
    tr:hover td {
        background: #fafafa;
    }
    /* 调整文本域容器 */
    .adaptive-textarea {
        position: relative !important;
        // min-height: 60px !important;
    }

    /* 输入框本体 */
    .adaptive-textarea textarea {
        width: 100% !important;
        // min-height: 60px !important;
        resize: vertical;
        line-height: 1.5;
        border: none !important;
        box-shadow: none !important;
    }

    .html-content-inner {
        padding: 0 5px;
    }
}
.sourceModal {
    padding: 24px 0;
    .sourceLeft {
        .ant-menu {
            border-inline-end: none !important;
            .ant-menu-item {
                padding-left: 0px;
                margin: 0;
                width: 100%;
            }
        }
    }
}

// 添加loading动画样式
.loading-container {
  display: flex;
  align-items: center;
  margin: 10px 0;
  
  .loading-dots {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
  }
  
  .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #CCCCCC;
    margin: 0 3px;
    opacity: 0.3;
    
    &.dot1 {
      animation: dot-pulse 1.5s infinite 0s;
    }
    
    &.dot2 {
      animation: dot-pulse 1.5s infinite 0.3s;
    }
    
    &.dot3 {
      animation: dot-pulse 1.5s infinite 0.6s;
    }
  }
}

@keyframes dot-pulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
}
// 在文件末尾添加
.file-browser-container {
  padding: 0 !important;

  height: 100%;
  
  .file-explorer-layout {
    display: flex;
    height: 100%;
    
    .file-explorer {
      width: 100%;
      height: 100%;
      border-right: 1px solid #e8e8e8;
      overflow-y: auto;
    }
    
    .file-content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      
      h3 {
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e8e8e8;
      }
      
      .empty-state {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        color: #999;
        font-size: 14px;
      }
      
      .file-content-preview {
        background-color: #fff;
        border-radius: 4px;
      }
    }
  }
}
